<template>
  <div>
      <div style="background-color: white">
      <el-row>
          <el-col :span="3" :pull="0">
                <span style="color: #606266;font-size:25px;font-weight:bold" href="#">房屋收费</span>
            </el-col>
            <el-col :push="17" :span="6">
                <el-button @click="demo()">上一页</el-button>
            </el-col>
    </el-row>
    <el-row>
        <el-col :span="5">
        <a style="color: #606266" href="#">首页</a>
        <a style="color: #dcdfe6" href="#">/ 资产管理 </a>
        <a style="color: #dcdfe6" href="#">/ 楼栋信息</a></el-col
      >
    </el-row>
      </div>
    <hr />
    <el-row>
        <el-col :span="3">
            <span style="color: #606266;font-size:20px;">{{$store.state.dingdan_houseid}}号房屋的费用</span>
        </el-col>
        <el-col :span="3">
             <el-button @click="dialogFormVisibleinsert=true">创建费用</el-button>
        </el-col>
    </el-row>
    <template>
      <el-table :data="pagination" style="width: 100%">
          <el-table-column sortable prop="orderId" label="订单编号" width="150">
        </el-table-column>
        <el-table-column prop="payitems.pname" label="费用名称" width="130">
        </el-table-column>
        <el-table-column prop="amountreceivable" label="累计应收金额" width="138">
        </el-table-column>
        <el-table-column prop="moneyReceived" label="累计实收金额" width="130">
        </el-table-column>
          <el-table-column prop="addtime" label="建帐时间" width="130">
        </el-table-column>
        <el-table-column prop="status" label="状态" width="130">
        </el-table-column>
        <el-table-column prop="start" label="计费起始时间" width="200">
        </el-table-column>
        <el-table-column label="操作" align=center width="280"> 
            <template slot-scope="scope">
         <el-button size="medium" @click="demo3(scope.row)" round>缴费历史</el-button>
          <el-button size="medium" @click="upd(scope.row)" round>取消缴费</el-button>
        </template>
        </el-table-column>
      </el-table>
    </template>
     <el-dialog :append-to-body="true" title="费用创建" :visible.sync="dialogFormVisibleinsert">
        <el-form>
        <el-form-item label="房屋编号：" label-width="120px">
            <el-input v-model="addinfo.houseId" :disabled="true">
            </el-input>
        </el-form-item>
        <el-form-item label="收费项目：" label-width="120px">
          <el-select v-model="addinfo.pname" placeholder="必填，请选择收费项目" autocomplete="off">
            <el-option
      v-for="item in shoufeixiang"
      :key="item.value"
      :label="item.label"
      :value="item.pname">
    </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="计费起始时间：" label-width="120px">
            <el-date-picker
      v-model="addinfo.date"
      type="datetime"
      placeholder="选择日期时间"
      default-time="12:00:00">
    </el-date-picker>
        </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleinsert = false">取 消</el-button>
        <el-button type="primary" @click="add()">保存</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
data(){
  return{
      dialogFormVisibleinsert:false,
      shoufeixiang:{},
      addinfo:{
          houseId:this.$store.state.dingdan_houseid,
      },
   pagination:[]
  };
},
methods: {
   demo3(row){
     this.$store.dispatch("changeOrderId",row.orderId)
    this.$router.push("/feiyong/jiaofeilishi");
  },
  add(){
    let url="shoufei/add3";
    this.$axios.post(url,this.addinfo).then(resp=>{this.dialogFormVisibleinsert=false;this.find()});
  },
     demo2(){
      let url="shoufei/select";
      this.$axios.post(url).then(resp=>{this.shoufeixiang=resp.data.result;console.log(this.shoufeixiang);})
    },
    demo(){
        this.$router.push("/feiyong/fangwushoufei");
    },
    upd(row){
        let url="shoufei/upd2";
        let param={id:row.orderId};
        this.$axios.post(url,param).then(resp=>{this.find()});
    },
  find(){
    let url="shoufei/findOrder";
    let params={id:this.$store.state.dingdan_houseid};
    this.$axios.post(url,params).then(resp=>{this.pagination = resp.data.result;console.log(this.pagination);});
  },
},
mounted(){
  this.find();
  this.demo2();
}
}
</script>

<style>

</style>